.personal-details {
  width: 1000px;
  height: 100%;
  border-radius: 0px 30px 30px 0px;
  background-color: white;
  display: flex;
  flex-direction: column;
}
.personal-details .head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 5%;
  padding-left: 10px;
  padding-right: 10px;
}
.personal-details .head .back {
  display: flex;
  width: 190.54px;
  height: 50px;
  align-items: center;
  justify-content: center;
}
.personal-details .head .back .back-icon {
  display: flex;
  width: 47.54px;
  height: 45.9px;
  justify-content: center;
  align-items: center;
  background: url('@/assets/personal/return.png');
  background-size: cover;
  margin-top: 14px;
}
.personal-details .head .back .title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 143px;
  height: 39px;
  font-size: 28px;
  font-weight: 700;
  color: #7948ea;
}
.personal-details .head .save {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 104.09px;
  height: 33.47px;
  background-color: #9a7bf0;
  color: white;
  border-radius: 9px;
  margin-right: 10px;
}
.personal-details .head .save .save-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 48px;
  background: url('@/assets/personal/save-icon.png');
  background-size: cover;
}
.personal-details .head .save .save-edit {
  width: 60px;
  height: 21px;
  font-size: 14px;
  font-weight: 400;
  color: white;
}
.personal-details .content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 80%;
  align-items: center;
}
.personal-details .content .board {
  width: 917px;
  height: 286px;
  border-radius: 15px;
  box-shadow: -2px -2px 3px 2px #d7c9f9, 2px 2px 3px 2px #d7c9f9;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}
.personal-details .content .board .details {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.personal-details .content .board .details .avartar {
  flex: 3;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.personal-details .content .board .details .avartar .photo {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.personal-details .content .board .details .avartar .photo .photo-img {
  width: 100%;
  height: 100%;
}
.personal-details .content .board .details .avartar .photo-icon {
  width: 50.51px;
  height: 45.9px;
  background: url('@/assets/personal/photo-icon.png');
  background-size: cover;
  margin-left: -60px;
  margin-top: 166px;
}
.personal-details .content .board .details .detail {
  flex: 6;
  height: 80%;
  display: flex;
  flex-wrap: wrap;
}
.personal-details .content .board .details .detail .detail-item {
  display: flex;
  box-sizing: border-box;
  width: 50%;
  flex-direction: column;
  justify-content: center;
}
.personal-details .content .board .details .detail .detail-item .title2 {
  display: flex;
  width: 72px;
  height: 28px;
  color: #808080;
  font-size: 18px;
  font-weight: 500;
  justify-content: center;
  align-items: center;
  margin-left: 40px;
}
.personal-details .content .board .details .detail .detail-item .detail-info {
  display: flex;
  width: 215.25px;
  height: 31.5px;
  border-radius: 5px;
  background-color: #e5e5e5;
  margin-left: 40px;
  margin-top: 5px;
  align-items: center;
  font-size: 18px;
  font-weight: 300;
  padding: 8px;
}
.personal-details .content .board .contact {
  display: flex;
  flex-direction: column;
  width: 90%;
  height: 90%;
  padding: 5%;
}
.personal-details .content .board .contact .title3 {
  display: flex;
  width: 80px;
  height: 28px;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
  color: #383838;
}
.personal-details .content .board .contact .content-2 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 90%;
}
.personal-details .content .board .contact .content-2 .content-item {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 50%;
  justify-content: center;
}
.personal-details .content .board .contact .content-2 .content-item .title4 {
  width: 72px;
  height: 28px;
  font-size: 18px;
  font-weight: 500;
  color: #808080;
  margin-left: 24px;
}
.personal-details .content .board .contact .content-2 .content-item .detail-info {
  width: 263.25px;
  height: 31.5px;
  border-radius: 5px;
  background-color: #e5e5e5;
  font-size: 18px;
  font-weight: 300;
  padding-left: 10px;
  margin-left: 24px;
  display: flex;
  align-items: center;
  outline: none;
}
.personal-details .content .board .contact .content-2 .content-item .eye-closed {
  width: 36px;
  height: 36px;
  background: url('@/assets/personal/eye-closed.png');
  background-size: cover;
  margin-left: 255px;
  margin-top: -35px;
}
.personal-details .content .board .contact .content-2 .content-item .eye-open {
  width: 36px;
  height: 36px;
  background: url('@/assets/personal/eye-open.png');
  background-size: cover;
  margin-left: 255px;
  margin-top: -35px;
}
.personal-details .content .board .contact .content-2 .content-item .safe-status {
  width: 67.5px;
  height: 42px;
  background-color: #7ae6a5;
  border-radius: 234px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  padding-right: 12px;
  margin-left: 20px;
}
.personal-details .content .board .contact .content-2 .content-item .safe-status .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #13a84e;
}
.personal-details .content .board .contact .content-2 .content-item .safe-status .safe-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 29px;
  font-size: 18px;
  font-weight: 300;
}
.personal-details .content .board .contact .content-2 .content-item .unsafe-status {
  width: 67.5px;
  height: 31.5px;
  background-color: #e67a7a;
  border-radius: 234px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  padding-right: 12px;
  margin-left: 20px;
}
.personal-details .content .board .contact .content-2 .content-item .unsafe-status .dot-unsafe {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #a81f13;
}
.personal-details .content .board .contact .content-2 .content-item .unsafe-status .safe-text {
  width: 40px;
  height: 29px;
  font-size: 18px;
  font-weight: 300;
}
